<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>商品列表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="{__STATIC__}/layuiAdmin/layui/css/layui.css" rel="stylesheet">
	<link href="{__STATIC__}/layuiAdmin/adminui/dist/css/admin.css" rel="stylesheet">
	<link href="{__STATIC__}/layuiAdmin/style/style.css" rel="stylesheet">
</head>
<body>
	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-card-body">
				<div style="padding-bottom: 10px;">
					<a class="layui-btn layui-btn-normal btn-top" href="{:url('admin/goods/create')}">添加商品</a>
					<button class="layui-btn layui-btn-info btn-top" data-type="batchDel">批量删除</button>
					<div class="layui-form search_ctr">
						<div class="layui-form-item">
							<div class="layui-inline">
								<div class="layui-input-inline w200">
									<input type="text" name="keys" placeholder="输入商品名称查询" class="layui-input">
								</div>
								<div class="layui-input-inline w150">
									<select name="k2">
										<option value="">所有商品</option>
										{volist name="catList" id="cat"}
										<option value="{$cat.id}">{neq name="$cat.parent_id" value="0"}&ensp;└&ensp;{/neq}{$cat.title}</option>
										{/volist}
									</select>
								</div>
								<button class="layui-btn layui-btn-normal" lay-submit lay-filter="LAY-search">查询</button>
							</div>
						</div>
					</div>
				</div>

				<table id="LAY-table" lay-filter="LAY-table"></table>
				<script type="text/html" id="pic">
					<div class="pic"><img src="{{d.pic}}" title="点击放大" lay-event="show"></div>
					<div class="show_pic" id="pic{{d.id}}"><img src="{{d.pic}}"></div>
				</script>
				<script type="text/html" id="type">
					{{#  if(d.type == 0){ }}普通商品{{#  } }}
					{{#  if(d.type == 1){ }}卡密/网盘{{#  } }}
					{{#  if(d.type == 2){ }}虚拟商品{{#  } }}
				</script>
				<script type="text/html" id="sale">
					<input type="checkbox" name="switch" lay-skin="switch" lay-text="是|否" value= {{ d.id }} lay-filter="isSale" {{#  if(d.is_sale == 1){ }}checked{{#  } }}>
				</script>
				<script type="text/html" id="top">
					<input type="checkbox" name="switch" lay-skin="switch" lay-text="是|否" value= {{ d.id }} lay-filter="isTop" {{#  if(d.is_top == 1){ }}checked{{#  } }}>
				</script>
				<script type="text/html" id="tableBar">
					<a class="link-text" href="{:url('admin/goods/edit')}?id={{d.id}}">编辑</a>
					<div class="link-line"></div>
					<a class="link-text" lay-event="del">删除</a>
				</script>

			</div>
		</div>
	</div>
</body>
</html>
<script src="{__STATIC__}/layuiAdmin/layui/layui.js"></script>
<script>
	layui.config({
		base: '{__STATIC__}/layuiAdmin/' // 静态资源所在路径
	}).use(['index', 'layer', 'table', 'form'], function(){
		let $ = layui.$;
		let layer = layui.layer;
		let table = layui.table;
		let form = layui.form;

		//初始化列表
		table.render({
			elem: '#LAY-table'
			,url: "{:url('getList')}"
			,cols: [[
				{type: 'checkbox', fixed: 'left'}
				,{field: 'id', width: 80, title: 'ID', sort: true}
				,{field: 'pic', width: 90, title: '图片', templet: '#pic', align:'center'}
				,{field: 'title', minWidth:220, title: '标题'}
				,{field: 'cat_id', width: 140, title: '分类'}
				,{field: 'type', width: 100, title: '类型', templet: '#type'}
				,{field: 'price', width: 100, title: '价格', sort: true}
				,{field: 'sales', width: 80, title: '销量', sort: true}
				,{field: 'stock', width: 80, title: '库存', sort: true}
				,{field: 'sequence', width: 80, title: '排序', sort: true}
				,{field: 'is_sale', width: 80, title: '上架', templet: '#sale', align:'center', sort: true}
				,{field: 'is_top', width: 80, title: '推荐', templet: '#top', align:'center', sort: true}
				,{title: '操作', width: 106, align:'center', fixed: 'right', toolbar: '#tableBar'}
			]]
			,page: true
			,limit: 20
			,height: 'full-100'
			,lineStyle: 'height: 80px;'
			,text: {none: '暂无相关数据'}
		});

		//监听搜索
		form.on('submit(LAY-search)', function(data){
			let field = data.field;
			//执行重载
			table.reload('LAY-table', {
				url: "{:url('getList')}"
				,where: field
				,page: {
					curr: 1 //重新从第 1 页开始
				}
			});
		});

		//监听是否推荐
		form.on('switch(isTop)', function(data){
			let switchData = data;
			let m_txt = '真的要取消推荐吗？';
			let is_top = 0;
			if(data.elem.checked) {
				is_top = 1;
				m_txt = '真的要推荐吗？';
			}
			layer.confirm(m_txt, function(index){
				$.ajax({
					type:"post",
					url:"{:url('setTop')}",
					data: {
						m_id:data.value,
						m_top:is_top
					},
					dataType:"json",
					beforeSend: function () {
						layer.load(1);
					},
					success:function(res){
						layer.closeAll();
						if(res.code != 0){
							let em = $(switchData.othis[0]);
							if(data.elem.checked) {
								//修改switch开关为关闭状态
								data.elem.checked = false;
								switchData.othis[0].classList.remove('layui-form-onswitch');
								em.children('em').text('否');
							}
							else {
								//修改switch开关为选中状态
								data.elem.checked = true;
								switchData.othis[0].classList.add('layui-form-onswitch');
								em.children('em').text('是');
							}
							layer.msg(res.msg);
						}
					}
				});

			}, function(index){
				let em = $(switchData.othis[0]);
				if(data.elem.checked) {
					//修改switch开关为关闭状态
					data.elem.checked = false;
					switchData.othis[0].classList.remove('layui-form-onswitch');
					em.children('em').text('否');
				}
				else {
					//修改switch开关为选中状态
					data.elem.checked = true;
					switchData.othis[0].classList.add('layui-form-onswitch');
					em.children('em').text('是');
				}
			});
		});

		//监听是否上架
		form.on('switch(isSale)', function(data){
			let switchData = data;
			let m_txt = '真的要下架吗？';
			let is_sale = 0;
			if(data.elem.checked) {
				is_sale = 1;
				m_txt = '真的要上架吗？';
			}
			layer.confirm(m_txt, function(index){
				$.ajax({
					type:"post",
					url:"{:url('setSale')}",
					data: {
						m_id:data.value,
						m_sale:is_sale
					},
					dataType:"json",
					beforeSend: function () {
						layer.load(1);
					},
					success:function(res){
						layer.closeAll();
						if(res.code != 0){
							let em = $(switchData.othis[0]);
							if(data.elem.checked) {
								//修改switch开关为关闭状态
								data.elem.checked = false;
								switchData.othis[0].classList.remove('layui-form-onswitch');
								em.children('em').text('否');
							}
							else {
								//修改switch开关为选中状态
								data.elem.checked = true;
								switchData.othis[0].classList.add('layui-form-onswitch');
								em.children('em').text('是');
							}
							layer.msg(res.msg);
						}
					}
				});

			}, function(index){
				let em = $(switchData.othis[0]);
				if(data.elem.checked) {
					//修改switch开关为关闭状态
					data.elem.checked = false;
					switchData.othis[0].classList.remove('layui-form-onswitch');
					em.children('em').text('否');
				}
				else {
					//修改switch开关为选中状态
					data.elem.checked = true;
					switchData.othis[0].classList.add('layui-form-onswitch');
					em.children('em').text('是');
				}
			});
		});

		//表格内操作按钮
		table.on('tool(LAY-table)', function(obj){
			let data = obj.data;
			if(obj.event === 'del'){
				layer.confirm('确定删除放入回收站么', function(index){
					$.ajax({
						type:"post",
						url:"{:url('delete')}",
						data: {
							m_id:data.id
						},
						dataType:"json",
						beforeSend: function () {
							layer.load(1);
						},
						success:function(res){
							layer.closeAll();
							if(res.code == 0){
								if(res.msg == 'success') {
									obj.del();
									layer.msg('删除成功');
								} else {
									layer.msg(res.msg);
								}
							}
							else {
								layer.msg(res.msg);
							}
						}
					});

				});
			} else if(obj.event === 'show'){
				layer.open({
					type: 1,
					shade: false,
					title: false,
					content: $('#pic' + data.id)
				});
			}
		});

		//头部操作按钮
		$('.btn-top').on('click', function(){
			let type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});

		let active = {
			batchDel: function(){
				let checkStatus = table.checkStatus('LAY-table');
				let checkData = checkStatus.data //得到选中的数据
				let ids = "0";
				if(checkData.length === 0){
					return layer.msg('请选择数据');
				}
				$.each(checkData,function(key,value){
					ids = ids + "," + checkData[key]['id'];
				});
				layer.confirm('确定删除放入回收站吗？', function(index) {
					$.ajax({
						type:"post",
						url:"{:url('delete')}",
						data: {
							m_id:ids
						},
						dataType:"json",
						beforeSend: function () {
							layer.load(1);
						},
						success:function(res){
							layer.closeAll();
							if(res.code == 0){
								let msg = res.msg == 'success' ? '删除成功' : res.msg;
								layer.msg(msg, {
									time: 2000
								}, function(){
									table.reload('LAY-table',{where: {time:new Date()}}); //数据刷新
								});
							}
							else {
								layer.msg(res.msg);
							}
						}
					});
				});
			}
		};

	});
</script>